<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { SpaceOptions } from "./Space";
    const props: SpaceOptions = $props();

    const { dir, wrap, inline, size, align, justify, children, ...others }: SpaceOptions = props;
    const classList = $derived.by(() =>
        useClassList(props, "cm-space", {
            "cm-space": true,
            [`cm-space-${props.dir || "h"}`]: true,
            [`cm-space-align-${props.align}`]: props.align,
            [`cm-space-justify-${props.justify}`]: !!props.justify,
            "cm-space-wrap": props.wrap,
            "cm-space-inline": props.inline,
        }),
    );
</script>

<div {...others} class={classList} style:gap={(props.size ?? 8) + "px"}>
    {@render props.children?.()}
</div>
